<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item>首页热词</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 搜索框热词 -->
            <div class="hot-title">搜索框热词</div>
            <div class="userlist">
              <div class="status_box">
                <el-select v-model="userType" placeholder="供方" @change="selectChanged()" class="selectBox">
                  <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="parentId" placeholder="一级类目" @change="selectChanged1()" class="selectBox">
                  <el-option v-for="(item,index) in options1" :key="item.id" :label="item.cname" :value="item.id">{{item.cname}}</el-option>
                </el-select>
                <el-select v-model="subClassifyId" placeholder="二级类目" @change="selectChanged2()" class="selectBox selectBox1">
                  <el-option v-for="(item,index) in options2" :key="item.id" :label="item.cname" :value="item.id"></el-option>
                </el-select>
                <div class="input">
                  <el-input v-model="word" placeholder="输入添加热词" clearable></el-input>
                </div>
                <div class="search"><el-button @click="addWord()">添加</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="wordList" border tooltip-effect="dark" style="width: 100%">
                  <el-table-column prop="title" label="轮播热词"></el-table-column>
                  <el-table-column prop="num" label="供需方" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.aspect== 1">供方</span>
                      <span v-if="scope.row.aspect== 2">需方</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="num" label="类目id">
                    <template slot-scope="scope">
                      <span>{{scope.row.secondLevelId}}/{{scope.row.firstLevelName}}/{{scope.row.secondLevelName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                      <el-button @click="delWord(scope.row)" type="text" size="small" class="hot-button">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'HotWord',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        wordList:[],//热词列表
        word:null,//热词
        //供需方状态
        options: [{
          value: '1',
          label: '供方',
        },{
          value: '2',
          label: '需方',
        }],
        userType:'1',//供需方值
        parentId:'',//一级类目id
        parentName:'',//一级类目名称
        subClassifyId:'',//二级类目id
        subClassifyName:'',//二级类目名称
        options1: [],
        options2: [],
      }
    },
    mounted() {
      this.findWordList();
      this.selectChanged()
    },
    methods: {
      //添加热词
      addWord(){
        console.log("输入的热词是：",this.word)
        this.$axios.post(this.baseURL1+'admin/dynamicPhrase/add',{
          'aspect':this.userType,
          'firstLevelId':this.parentId,
          'firstLevelName':this.parentName,
          'secondLevelId':this.subClassifyId,
          'secondLevelName':this.subClassifyName,
          'title':this.word,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.findWordList()
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //查询热词列表
      findWordList(){
        this.$axios.post(this.baseURL1+'admin/dynamicPhrase/list',{
          "page":this.page,
          "size":this.pageSize,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.wordList = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //删除某一个热词
      delWord(row){
        console.log("要删除的热词是：",row.id)
        this.$confirm('确认删除该热词?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/dynamicPhrase/delete',{
            'id':row.id,
            "requestSource":"PC"
          }).then((res)=>{
            if(res.data.code==1){
              this.findWordList()
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 根据供需关系查找 一级类目
      selectChanged(){
        //console.log("供需："+this.userType);
        this.parentId =''//选择前清空
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          'status':1,
          'aspect':this.userType,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
             this.options1 = res.data.data.records
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //根据一级类目查找 二级类目
      selectChanged1(){
        this.subClassifyId = '';//选择前清空
        //console.log("一级类目id："+this.parentId);
        //遍历获取类目名称
        for(var i=0; i<this.options1.length;i++){
          if(this.parentId==this.options1[i].id){
             this.parentName=this.options1[i].cname;
          }
        }

        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          'status':1,
          'parentId':this.parentId,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
             //console.log("一级类目："+res.data.data.records);
             this.options2 = res.data.data.records
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })

      },
      //点击二级类目
      selectChanged2(){
        //console.log("二级类目id："+this.subClassifyId);
        //遍历获取类目名称
        for(var i=0; i<this.options2.length;i++){
          if(this.subClassifyId==this.options2[i].id){
             this.subClassifyName=this.options2[i].cname;
          }
        }
        //console.log("二级类目："+this.subClassifyName);
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .hot-title{
    width: 100%;
    height: 30px;
    background-color: #cfcfcf;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 30px;
  }
  >>> .el-button{
    background-color:#409eff!important;
  }
  >>> .hot-button{
    background-color:transparent!important;
  }
  .table{
    margin: 0 10px;
  }
  >>> .el-input__inner{
    height: 35px;
    line-height: 35px;
    margin-top: 7px;
  }
  .selectBox{
    width: 160px;
    margin-left: 10px;
  }
  .selectBox1{
    margin-right: 0px;
  }
  >>>  .el-input__suffix{
    line-height: 35px!important;
    margin-top: 4px!important;
  }
</style>
